<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: hotpink;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <button onclick="getColor()">换个颜色试试</button>
</body>
<script>


  //3、
  const getColor = () => {
    //1、获取元素
    const box = document.querySelector('.box') //改颜色的盒子
    const btn = document.querySelector('button') //按钮
    //2、随机修改颜色，需要随机数，区间是 0 - 15
    //2.1 封装一个随机数的函数，待会在循环中调用
    const getRandom = (Max, Min) => Math.floor(Math.random() * (Max - Min + 1)) + Min
    //3.1 一个字符串 用来拼接十六进制
    let color = '#' //十六进制色是#开头的
    //3.2 一个数组
    const arrColor = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'] //数组存放十六进制的字符
    //3.3因为十六进制字符串是：# + 6个字符，所以我们要循环六次
    for (let i = 0; i < 6; i++) {
      //3.4 获取到随机数
      const random = getRandom(0, arrColor.length)
      console.log(random) //测试一下随机数
      //3.5 把随机数拼接给字符串 color
      color += arrColor[random]
    }
    //4、触发btn的点击事件，给div的背景色样式调用随机颜色函数
    box.style.background = color
    // btn.addEventListener('click', getColor)
    //3.6 把十六进制字符串返回出去
  }



</script>

</html>